<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

    <style>
      .card {
        position: relative;
        overflow: hidden;
        transition-duration: 0.3s;
        margin-bottom: 10px;
        width: 200px;
        height: 100px;
        background-color: #ffaa00;
        content-visibility: auto;
      }
      .card:before {
        content: '';
        position: absolute;
        left: -665px;
        top: -460px;
        width: 300px;
        height: 15px;
        background-color: rgba(255, 255, 255, 0.5);
        transform: rotate(-45deg);
        animation: searchLights 2s ease-in 0s infinite;
      }
      @keyframes searchLights {
        0% {
        }
        75% {
          left: -100px;
          top: 0;
        }
        100% {
          left: 120px;
          top: 100px;
        }
      }
    </style>

  </head>
  <body>
    <form action="http://127.0.0.1:9000" method="post">
      <input type="text" name="username">
      <input type="text" name="password">
      <input type="submit" value="提交">
    </form>
    <div id="app">
      <div :class="['card', 'aaa-' + index]" v-for="(item, index) in list" :key="index">
        {{index}}
        <span>111111111</span>
        <span>111111111</span>
        <span>111111111</span>
        
      </div>

    </div>
  </body>
</html>



<script>
  const { createApp, ref } = Vue

  createApp({
    setup () {
      const message = ref('Hello vue!')
      let list = ref(new Array(100000))
      return {
        message,
        list
      }
    }
  }).mount('#app')
</script>